<template>
  <div class="login">
    <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>
    <!--<headers title="登录" back="<h4>&lt;</h4>&nbsp;返回"></headers>-->
    <!--<headers title="登录"></headers>-->
    <div class="content">
      <div class="login_content">
        <p style="text-align: center">
          <img src="../assets/images/login/logo.png" alt="">
          <b>登录</b>
        </p>

        <div class="logining">
          <input type="tel" placeholder="请输入您的手机号" v-model="telephone" >
          <hr>
          <input type="password" placeholder="请输入您的密码" v-model="password">
          <hr>
        </div>
        <button @click="login()">登陆</button>
        <div class="login_bottom">
          <!--将login.vue中show参数传到register.vue中，可以接收到，但是使用v-if或v-show无法显示-->
          <!--<router-link class="a" :to="{name: 'register', params: {title: '找回密码', show: 'false'}}">忘记密码</router-link>-->
          <!--<router-link class="a" :to="{name:'register', params: {title:'注册', show: 'true'}}">点我注册</router-link>-->

          <!--<router-link class="a" :to="{name: 'register', params: {title: '找回密码'}}">忘记密码</router-link>-->
          <router-link class="a" :to="{name: 'register', params: {tel: ''}}">点我注册</router-link>
        </div>
      </div>
    </div>
      <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>

  </div>
</template>

<script>
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  /* eslint-disable semi,handle-callback-err */

//  let reg = /^1[34578]\d{9}$/
  let data = {
//    title: '',
    telephone: '',
    password: ''
//    dis: true
//    xieyi: ''
//    show: ''
  }
  let openid = '';//获取url参数
  export default {
    name: 'login',
    data () {
      return {
         telephone: '',
    password: '',
        showAlert:false,
        alertText:null
      }
    },
    created () {
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)

        if(!this.$route.query.openid){
          window.location.href = "http://www.yihangyoupin.com/NotifyWxAuthorize?tzUrl="+encodeURIComponent(window.location.href)

        }else{
          openid = this.$route.query.openid
          const jsonValue = JSON.stringify({
          'c': '10005',
          'p': {
            'openid': openid,  // 帐号
            'userType': 0   //密码
          }
        });
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res.data);
          window.localStorage.data = JSON.stringify(res.data.p.user); // 将后台数据转变为json字符串存储
          if (res.data.p.isTrue === true) {
            this.alertTip('登录成功');
            this.go = function(){
               this.showAlert = false;
            }
            //缓存openid
            window.localStorage.setItem('openid',openid)
            this.telephone = '';
            this.password = '';
            this.$router.push({name: 'mall'});
 //          this.$emit('has-log', res.data.username);
          } else {
            this.alertTip(res.data.p.errorMsg);
            this.go = function(){
               this.showAlert = false;
            }
//            this.telephone = '';
            // this.password = '';
          }
        }, (res) => {
          this.telephone = '';
          this.alertTip('网络错误');
          this.go = function(){
             this.showAlert = false;
          }
        })

        }
    },
    methods: {
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go(){
        this.showAlert = false
        },
      login () {
        // get方法中：定义一个对象作为参数进行接口调取数据
        // post发送数据到后端，还需要第三个参数：{emulateJSON:true}
        // 后台请求数据成功，则验证res；请求失败则……
        // const jsonValue = JSON.stringify({
        //   'c': '10005',
        //   'p': {
        //     'platId': this.telephone,  // 帐号
        //     'passWord': this.password   //密码
        //   }
        // });
        const jsonValue = JSON.stringify({
          'c': '10005',
          'p': {
            'openid': openid,  // 帐号
            'userType': 0   //密码
          }
        });
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res.data);
          window.localStorage.data = JSON.stringify(res.data.p.user); // 将后台数据转变为json字符串存储
//          const data = JSON.parse(window.localStorage.data); // 将json字符串转化为json对象
//          console.log(data);
          // const data = JSON.parse(window.localStorage.data); // 将json字符串转化为json对象
          // console.log(data);
//          this.$store.state.login = res.data.p.user;
//          console.log(this.$store.state.login);
          if (res.data.p.isTrue === true) {
            this.alertTip('登录成功');
            this.go = function(){
               this.showAlert = false;
            }
            this.telephone = '';
            this.password = '';
            this.$router.push({name: 'mall'});
 //          this.$emit('has-log', res.data.username);
          } else {
            this.alertTip(res.data.p.errorMsg);
            this.go = function(){
               this.showAlert = false;
            }
//            this.telephone = '';
            // this.password = '';
          }
        }, (res) => {
          this.telephone = '';
          this.alertTip('网络错误');
          this.go = function(){
             this.showAlert = false;
          }
        })
      },
      watch: {
//        password (val) {
//          if (val !== '' && this.telephone !== '') {
//            this.dis = false
//            // alert(111)
//          } else {
//            this.dis = true
//          }
//        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /*padding: 80px 0 0;*/
    box-sizing: border-box;
  }
  .login_content{
    display: flex;
    flex-direction: column;
    align-items: center;
    /*font-size: 16px;*/
    margin-top: 20%;
  }
  .login_content input{
    border: none;
    outline: none;
    font-size: 30px;
    text-align: center;
    /*margin-top: 40px;*/
  /*margin-left: 6rem;*/
  }
  .login_content .logining{
    text-align: center;
    margin: 50px 0;
  }
  .login_content b{
    display: block;
    font-size: 30px;
    margin-top: 30px;
  }
  .login_content p img{
    width: 145px;
    height: 145px;
  }
  .login_content hr{
     width: 515px;
     margin: 20px 0 30px;
   }
  .login_content button{
    border: none;
    outline: none;
    background: #FD5F3F;
    border-radius: 50px;
    width: 470px;
    height: 75px;
    /*font-size: 1.2rem;*/
    color: #fff;
    margin-bottom: 40px;
  }
  .login_content .login_bottom{
    font-size: 20px;
  }
</style>
